import "./index.scss";
import { RotateCw } from "lucide-react";

const ProtoBrowser = ({
  width,
  height,
  urlValue = "",
  urlInputChange = () => {},
  children,
}) => {
  return (
    <>
      <div
        className="proto_browser_wrap"
        style={{
          width: width,
          height: height,
        }}
      >
        <div className="browser_header_box">
          <div className="action_box">
            <span className="action_item red"></span>
            <span className="action_item yellow"></span>
            <span className="action_item green"></span>
          </div>
          <div className="url_input_box">
            <input
              type="text"
              className="url_input"
              value={urlValue}
              onInput={(e) => {
                urlInputChange(e.target.value);
              }}
            />
            <RotateCw size={10} color="#9e9fa0" className="reload_icon" />
          </div>
          <div></div>
        </div>
        <div className="browser_content_box">{children}</div>
      </div>
    </>
  );
};

export default ProtoBrowser;
